<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<head>
    <link
            rel="stylesheet"
            type="text/css"
            href="../css/aqua.min.css"
    />
    <title>商品管理</title>
</head>

<body>
<div align="center">
    <div style="font-size: 22px;">
        商品管理
    </div>
    <hr class="divider"/>
    <div style="width: 80%">
        <div style="text-align: left; margin-left: 0%; float: left">
            <button class="btn btn-secondary add-btn" onclick="location.href = '/' ">返回</button>
        </div>
        <div style="text-align: right; margin-right: 0%">
            <button class="btn btn-info add-btn" onclick="location.href = 'add.html'">添加</button>
        </div>

        <div style="margin-bottom: 2vh" align="left">
            <div style="display: flex;">
                <div style="max-width: 1000px; display: flex">
                    <div style="display: flex;width: 100%">
                        <label style="width: 6vh; margin: auto 0;">编号</label>
                        <input style="width: 80%;" type="text" class="form-control" id="search_id"/>
                    </div>
                    <div style="display: flex;width: 100%; margin-left: 2vh">
                        <label style="width: 6vh; margin:auto 0">工厂</label>
                        <select style="width: 80%;" class="form-control" id="search_fac_id" >
                            <option value="">全部</option>
                        </select>
    <!--                    <input style="width: 100%;" type="text" class="form-control" id="search_fac_id"/>-->
                    </div>
                    <div style="display: flex;width: 100%;margin-left: 2vh">
                        <label style="width: 6vh; margin:auto 0">名称</label>
                        <input style="width: 80%;" type="text" class="form-control" id="search_name"/>
                    </div>
                    <div style="display: flex;width: 100%;margin-left: 2vh;margin-right: 2vh">
                        <label style="width: 6vh; margin:auto 0">价格</label>
                        <input style="width: 80%;" type="text" class="form-control" id="search_price"/>
                    </div>
                </div>
                <div style="display: flex; margin-left: auto;">
                    <div style="display: flex;  width: 110px">
                        <button class="btn btn-info add-btn" style="margin-bottom: 0;" onclick="search()">搜索</button>
                        <button class="btn btn-info add-btn" style="margin-bottom: 0; margin-left: 10px" onclick="location.reload()">重置</button>
                    </div>
                </div>
            </div>

        </div>
        <table class="table" id="table" style="width: 100%">
            <thead>
            <tr>
                <th>编号</th>
                <th>工厂</th>
                <th>名称</th>
                <th>描述</th>
                <th>价格</th>
                <th style="text-align: center" width="105px">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <!--                <td>${dept.id}</td>-->
                <!--                <td>${dept.name}</td>-->
                <!--                <td>${dept.loc}</td>-->
                <!--                <td>-->
                <!--                    <button class="btn btn-primary btn-op" onclick="location.replace('dept/find?id=${dept.id}')">修改-->
                <!--                    </button>-->
                <!--                    <button class="btn btn-danger btn-op" onclick="location.replace('dept/delete?id=${dept.id}')">删除-->
                <!--                    </button>-->
                <!--                </td>-->
            </tr>
            </tbody>
        </table>

    </div>
</div>
</body>
</html>
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="application/javascript">
    list()

    function update(e) {
        console.log(e.children[0].innerHTML)
        let id = e.children[0].innerHTML
        location.href = 'update.html?id=' + id
    }

    function del(e) {
        console.log(e.children[0].innerHTML)
        let id = e.children[0].innerHTML
        if (window.confirm("确定删除？")) {
            $.ajax({
                url: "http://localhost:9527/api/commodity/delete/" + id, success: function (result) {
                    location.reload()
                }
            })
        }

    }

    function search(){
        let id = document.getElementById("search_id").value;
        let fac_id = document.getElementById("search_fac_id").value;
        let name = document.getElementById("search_name").value;
        let price = document.getElementById("search_price").value;
        console.log(id, fac_id, name, price)

        let table = document.getElementById("table");
        $.ajax({
            url: "http://localhost:9527/api/commodity/list",
            data:{
                "id":id,"fac_id":fac_id,"name":name,"price":price
            },
            success: function (result) {
                console.log(result)
                let total = table.rows.length
                for (let i = 0; i < total-2; i++) {
                    table.deleteRow(2)
                }
                //通过id获得要添加数据的表格
                for (let i = 0; i < result.length; i++) {
                    //在表尾添加一行数据
                    var row_ = table.insertRow(table.rows.length);
                    /*
                    description: "desc"
                    fac_id: 1
                    fac_name: "test_fac"
                    id: 1
                    name: "modify-955123878"
                    price: null
                     */
                    row_.insertCell(0).innerHTML = result[i].id;
                    row_.insertCell(1).innerHTML = result[i].fac_name;
                    row_.insertCell(2).innerHTML = result[i].name;
                    row_.insertCell(3).innerHTML = result[i].description;
                    row_.insertCell(4).innerHTML = result[i].price;
                    row_.insertCell(5).innerHTML = '<button class="btn btn-primary btn-op" onclick="update(this.parentNode.parentNode)">修改\n' +
                        '                    </button>\n' +
                        '                    <button class="btn btn-danger btn-op" onclick="del(this.parentNode.parentNode)">删除\n' +
                        '                    </button>';
                }
                console.log("获取数据成功")
            }
        });
    }

    function list() {
        const select = document.getElementById('search_fac_id');
        // 需要先ajax获取到所有的factory，之后动态添加到select_fac中
        $.ajax({
            url: "http://localhost:9527/api/factory/list", success: function (result) {
                console.log(result)
                for (let i = 0; i < result.length; i++) {
                    // console.log(result[i])
                    //添加到select下拉选择框中
                    select.options.add(new Option(result[i].name, result[i].id));
                }
                // select.options.add(new Option('全部', ''));
                console.log("获取数据成功")
            }
        });

        var table = document.getElementById("table");
        //获得table的行数
        $.ajax({
            url: "http://localhost:9527/api/commodity/list", success: function (result) {
                console.log(result)
                //通过id获得要添加数据的表格

                for (let i = 0; i < result.length; i++) {
                    var table = document.getElementById("table");
                    // console.log(result[i])

                    //在表尾添加一行数据
                    var row_ = table.insertRow(table.rows.length);

                    /*
                    description: "desc"
                    fac_id: 1
                    fac_name: "test_fac"
                    id: 1
                    name: "modify-955123878"
                    price: null
                     */
                    row_.insertCell(0).innerHTML = result[i].id;
                    row_.insertCell(1).innerHTML = result[i].fac_name;
                    row_.insertCell(2).innerHTML = result[i].name;
                    row_.insertCell(3).innerHTML = result[i].description;
                    row_.insertCell(4).innerHTML = result[i].price;
                    row_.insertCell(5).innerHTML = '<button class="btn btn-primary btn-op" onclick="update(this.parentNode.parentNode)">修改\n' +
                        '                    </button>\n' +
                        '                    <button class="btn btn-danger btn-op" onclick="del(this.parentNode.parentNode)">删除\n' +
                        '                    </button>';
                }

                console.log("获取数据成功")
            }
        });
    }
</script>
<style>
    .add-btn {
        padding: 8px;
        /*--btn-bg: blue;*/
        margin-bottom: 1rem;
    }

    .btn-op {
        padding: 8px;
    }

    select {
        appearance: auto;
        border-color: rgba(0, 0, 0, 0.3);

        --input-padding: 0.5rem 0.5rem;
        --input-color: black;
        --input-bg: white;
        --input-border-color: rgba(0, 0, 0, 0.3);
        --input-radius: 4px;
        --input-placeholder-color: var(--secondary-color-darker);
        box-sizing: border-box;
        width: 100%;
        padding: var(--input-padding);
        margin: 0;
        color: var(--input-color);
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        border-radius: var(--input-radius);
        /*transition: .3s;*/
    }

</style>
